<#import "../tpl/pageTep.ftl" as page>
    <@page.pageBase currentMenu="下载管理">
    <!--suppress ALL -->
    <style>
        .progress span{
            display: inline-block;
            height: 20px;
            background-color: #4ddaff;
        }
    </style>
    <form id="searchForm" class="form-panel" action="/rest/manage/fileload/loadData">
        <ul class="panel-content">
            <li>
                <div class="form-actions">
                    <div class="control-group controls span5">
                        <input type="text" id="searchForm" class="input-normal  input-pad cartNo" name="name">
                    </div>
                    <div class="form-actions  controls">
                        <button type="submit" class="button  button-success">
                            查询
                        </button>
                        <a onclick="return add();" class="button button-info">
                            新增
                        </a>
                        <a  class="button button-danger" onclick="return delFunction();">
                            批量删除
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </form>
        <div id="addContent" style="display:none;">
            <form id="addForm" class="form-horizontal" action="${basepath}/rest/manage/fileload/insertJson" method="post">
                <div class="row">
                    <div class="control-group span16">
                        <label class="control-label">   <s>*</s>安装包名称：</label>
                        <div class="control-group-img  controls ">
                            <input type="text" class="addname input-normal control-text" name="name" data-rules="{required : true}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span16">
                        <label class="control-label">   <s>*</s>排安装包图片：</label>
                        <div class="controls">
                            <input type="text" id="reqPic" class="input-normal control-text "
                                   data-rules="{required : true}" name="image" readonly>
                            <a id="addpicBtn" class="button button-min button-primary pull-right"
                               style="height:20px;margin-left: 10px;">上传</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span16">
                        <label class="control-label">   <s>*</s> 安装包简介：</label>
                        <div class="control-group-img  controls ">
                            <input type="text" class="input-normal control-text" name="introduce" data-rules="{required : true}">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="control-group span16">
                        <label class="control-label">   <s>*</s>安装包附件：</label>
                        <div class="controls">
                            <input type="text" id="reqPic" class="input-normal control-text "
                                   data-rules="{required : true}" name="fileUrl" readonly>
                            <a id="zipBtn" class="button button-min button-primary pull-right"
                               style="height:20px;margin-left: 10px;">上传</a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="addProcess"></div>
                </div>
            </form>
        </div>
    <#----------------------------------------------新增表单 end---------------------------------------------------------->
<div id="editContent" style="display:none;">
    <form id="editForm" class="form-horizontal" action="${basepath}/rest/manage/fileload/updateJson" method="post">
        <input type="hidden" name="id">
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">   <s>*</s>安装包名称：</label>
                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal editname control-text" name="name" data-rules="{required : true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">   <s>*</s>排安装包图片：</label>
                <div class="controls">
                    <input type="text" id="reqPic" class="input-normal control-text "
                           data-rules="{required : true}" name="image" readonly>
                    <a id="editpicBtn" class="button button-min button-primary pull-right"
                       style="height:20px;margin-left: 10px;">上传</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">   <s>*</s> 安装包简介：</label>
                <div class="control-group-img  controls ">
                    <input type="text" class="input-normal control-text" name="introduce" data-rules="{required : true}">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control-group span16">
                <label class="control-label">   <s>*</s>安装包附件：</label>
                <div class="controls">
                    <input type="text" id="reqPic" class="input-normal control-text "
                           data-rules="{required : true}" name="fileUrl" readonly>
                    <a id="editzipBtn" class="button button-min button-primary pull-right"
                       style="height:20px;margin-left: 10px;">上传</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="editProcess"></div>
        </div>
    </form>
</div>
    <div id="grid"></div>
<script>
var Grid = BUI.Grid,
        Store = BUI.Data.Store,
        columns = [
            {title : '序号',dataIndex :'id', width:'18%',elCls: 'center', renderer:function (value, obj, index) {
                    return index+1;
                }},
            {title : '安装包名称',dataIndex :'name', width:'18%',elCls: 'center'},
            {title : '安装包图片',dataIndex :'image',  width:'18%',elCls: 'center',renderer:function (value, obj, index) {
                    return'<img src="/'+value+'" width="100" height="100"/>' ;
                }},
            {title : '安装包简介',dataIndex :'introduce',  width:'18%',elCls: 'center',},
            {title : '下载次数',dataIndex :'loadAmount',  width:'18%',elCls: 'center',},
            {title : '操作',dataIndex : 'id', width:'10%',elCls: 'center',renderer : function (value,obj,index) {
                    return '<a href="javascript:editById(' + value + ')">编辑</a>'
                            +'&nbsp;&nbsp;<a href="javascript:deleteOne(' + value + ')">删除</a>';
                }
            }
        ];

var store = new Store({
            url : '/rest/manage/fileload/loadData',
            autoLoad:true, //自动加载数据
            params : { //配置初始请求的参数
                length : '10',
                status:$("#status").val()
            },
            pageSize:10,	// 配置分页数目
            root : 'list',
            totalProperty : 'total'
        }),
        grid = new Grid.Grid({
            render:'#grid',
            columns : columns,
            loadMask: true, //加载数据时显示屏蔽层
            store: store,
            plugins : [Grid.Plugins.CheckSelection], // 插件形式引入多选表格
            // 底部工具栏
            bbar:{
                pagingBar:true
            }
        });

grid.render();


var form = new BUI.Form.HForm({
    srcNode: '#searchForm'
}).render();

form.on('beforesubmit', function (ev) {
    var obj = form.serializeToObject();
    obj.start = 0; //返回第一页
    store.load(obj);
    return false;
});

//删除选中的记录
function delFunction(){
    var selections = grid.getSelection();
    var ids=new Array();
    for(var i=0;i<selections.length;i++){
        ids[i]=selections[i].id.toString()
    }
    $.ajax({
        type: "POST",
        url: "${basepath}/rest/manage/fileload/deletesJson",
        dataType: "json",
        data: {
            ids:ids
        },
        success: function (data) {
            var obj = new Object();
            obj.start = 0; //返回第一页
            store.load(obj);
        }
    });
}
function deleteOne(id) {
    BUI.Message.Confirm('确认要删除吗？', function () {
        $.ajax({
            type: "POST",
            url: "${basepath}/rest/manage/fileload/deleteJson",
            dataType: "json",
            data: {
                id: id
            },
            success: function (data) {
                var obj = form.serializeToObject();
                obj.start = 0;
                store.load(obj);
            }
        });
    },'question')
}
/*------------------------------------------------新增表单处理start------------------------------------------------*/
var addForm = new BUI.Form.Form({
    srcNode: '#addForm',
    submitType: 'ajax',
    callback: function (data) {
        var obj = new Object();
        obj.start = 0; //返回第一页
        store.load(obj);
        addDialog.close();
    }
}).render();

var addDialog = new BUI.Overlay.Dialog({
    title: '新增下载',
    width: 500,
    height: 320,
    contentId: 'addContent',
    success: function () {
        if (addForm.isValid()) {
            addForm.submit();
        } else {
            addForm.valid();
        }
    }
});

//添加上传图片按钮事件
function add() {
    addForm.clearErrors();
    addForm.clearFields();
    addDialog.show();
    addupload()
}
function addupload() {
    var reqPicUploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#addpicBtn',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    //获取一张主图并传入url
    reqPicUploader.on('uploadSuccess', function (file, response) {
        reqPicUploader.removeFile(file);
        addForm.setFieldValue("image", response.url);
    });
    var fileuploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/uploadFile',
        pick: '#zipBtn',
        formData: { "fileName": $('.addname').val()},
        resize: false,
        accept: {
            title: 'intoTypes',
            extensions: 'rar,apk,zip,exe',
            mimeTypes: '.rar,.zip,.apk,.exe'
        }
    });
    fileuploader.on( 'uploadBeforeSend', function( block, data ) {
        data.fileName = $('.addname').val();
    });
    fileuploader.on('uploadSuccess', function (file, data) {
        fileuploader.removeFile(file);
        addForm.setFieldValue("fileUrl", data.data);
    });
    fileuploader.on( 'uploadProgress', function( file, percentage ) {
        var li = $( '.addProcess'),percent = li.find('.progress span');
        if ( !percent.length ) {
            percent = $('<p class="progress"><span></span></p>').appendTo( li ).find('span');
        }
        percent.css( 'width', percentage * 100 + '%' );
    });
}
/*------------------------------------------------新增表单处理 end-------------------------------------------------*/
/*------------------------------------------------编辑表单处理 start-----------------------------------------------*/
var editForm = new BUI.Form.Form({
    srcNode: '#editForm',
    submitType: 'ajax',
    callback: function (data) {
        var obj = new Object();
        obj.start = 0; //返回第一页
        store.load(obj);
        editDialog.close();
    }
});
editForm.render();

var editDialog = new BUI.Overlay.Dialog({
    title: '编辑下载',
    width: 500,
    height: 320,
    contentId: 'editContent',
    success: function () {
        if (editForm.isValid()) {
            editForm.submit();
        } else {
            editForm.valid();
        }
    }
});

//编辑按钮事件
function editById(id) {
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "${basepath}/rest/manage/fileload/toEditJson",
        data: {id: id},
        success: function (data) {
            var form = $("#editForm")[0];
            BUI.FormHelper.setFields(form, data.data);
            editDialog.show();
            editupload();
        }
    });
}
function editupload() {
    var editPicUploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/config?action=uploadimage',
        pick: '#editpicBtn',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });
    //获取一张主图并传入url
    editPicUploader.on('uploadSuccess', function (file, response) {
        editPicUploader.removeFile(file);
        editForm.setFieldValue("image", response.url);
    });
    var editfileuploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/base/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/rest/manage/ued/uploadFile',
        pick: '#editzipBtn',
        formData: { "fileName": $('.editname').val()},
        resize: false,
        accept: {
            title: 'intoTypes',
            extensions: 'rar,apk,zip,exe',
            mimeTypes: '.rar,.zip,.apk,.exe'
        }
    });
    editfileuploader.on( 'uploadBeforeSend', function( block, data ) {
        data.fileName = $('.editname').val();
    });
    editfileuploader.on('uploadSuccess', function (file, data) {
        editfileuploader.removeFile(file);
        editForm.setFieldValue("fileUrl", data.data);
    });
    editfileuploader.on( 'uploadProgress', function( file, percentage ) {
        var li = $( '.editProcess'),percent = li.find('.progress span');
        if ( !percent.length ) {
            percent = $('<p class="progress"><span></span></p>').appendTo( li ).find('span');
        }
        percent.css( 'width', percentage * 100 + '%' );
    });
}
</script>

</@page.pageBase>
